<template>
  <el-menu
      :default-active="$route.path"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
  >
    <el-menu-item index="/public">公共</el-menu-item>
    <el-menu-item index="/training" >培训</el-menu-item>
    <el-menu-item index="/test">考试</el-menu-item>

    <div class="flex flex-wrap items-center demo">
      <el-dropdown >
        <el-button type="primary">
          个人中心<el-icon class="el-icon--right"><arrow-down /></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="toself">个人信息</el-dropdown-item>
            <el-dropdown-item @click="dialogVisiblePsw=true">修改密码</el-dropdown-item>
            <el-dropdown-item @click="out">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </el-menu>

  <el-dialog
      v-model="dialogVisiblePsw"
      title="修改密码"
      width="500"
      :closeOnClickModal="false"
  >
    <!-- <span>请输入用户名:</span> <el-input v-model="username"/> -->
    <span>请输入新密码:</span> <el-input type="password" v-model="newPsw0"/>
    <span>请再次输入新密码:</span> <el-input type="password" v-model="newPsw1"/>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisiblePsw = false,newPsw0='',newPsw1=''">取消</el-button>
        <el-button type="primary" @click="judgePsw">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script>
import { useRouter} from 'vue-router'
import {useStore} from 'vuex'
import API from '@/api/identity'
import {JSEncrypt} from "jsencrypt";
import {reactive, ref} from "vue";
import { ElMessage } from 'element-plus';
export default {


  setup(){
    const router = useRouter()
    const store = useStore()
    let dialogVisiblePsw=ref(false)
    let username=ref('')
    let newPsw0=ref('')
    let newPsw1=ref('')
    let paramnew=reactive({
      type:'1',
      loginStatus:'1',
    })
    function login(){
      router.push('/login')
    }
    function out(){
      store.commit('user/out')
      router.push('/login')
    }
    function toself(){
      router.push('/self')
    }

    //  修改密码
    function judgePsw(){
      if(newPsw0.value!==newPsw1.value){
        ElMessage.error('两次密码输入不一致！')
      }else{
        paramnew.username=localStorage.getItem('loginusername')
        paramnew.password=newPsw0.value
        API.getPublic().then((res) =>{
          if (res.data.code === '0') {
            const entry = new JSEncrypt()
            entry.setPublicKey(res.data.content.publicKeyStr)
            paramnew.username =  entry.encrypt(paramnew.username)
            paramnew.password =entry.encrypt(paramnew.password)
            paramnew.random=res.data.content.random
          }
          let token = localStorage.getItem('token')
          API.changePassword(paramnew,token).then(res=>{
            if(res.data.code==='0'){
              username.value='',
                  newPsw0.value='',
                  newPsw1.value='',
                  dialogVisiblePsw.value=false
              ElMessage.success('密码修改成功！')
              router.push('/login')
              store.commit('user/loginOut')
            }
          }).catch(error=>{
            ElMessage.error('用户名错误！')
          })
        }).catch(error=>{
          console.log(error)
        })
      }
    }

    return{
      login,
      out,
      toself,
      dialogVisiblePsw,
      newPsw0,
      newPsw1,
      judgePsw,
      username,
      paramnew
    }
  }
}
</script>

<style scoped>
.el-menu-demo{
  padding-left: 300px !important;
}
.el-menu-item{
  font-size: 20px !important;
}
.demo{
  display: flex;
  align-items: center;
  margin-left: auto;
  padding-right: 30px;
}

</style>